<template>
  <div>
    <ul v-if="data && data.length > 0" class="img-list">
      <li v-for="(item, index) in data" :key="index" class="img-item">
        <div class="img-wraper" @click="preImg(index)">
          <img :src="item.src" alt="">
        </div>
        <p class="img-name">{{ item.name ? item.name : '图片' }}</p>
      </li>
    </ul>
    <viewImg
      ref="viewImg"
      :list="data"
      :show.sync="showViewImg"
      :cur-index="curIndex"
      :width="1000"
      :height="700"
    />
  </div>
</template>

<script>
import viewImg from './viewImg'
export default {
  components: { viewImg },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      curIndex: 0,
      showViewImg: false
    }
  },
  methods: {
    preImg(i) {
      this.curIndex = i
      this.showViewImg = true
    }
  }
}
</script>

<style lang="scss" scoped>
	ul.img-list {
		display: inline-block;
	}
	li.img-item:last-child {
		margin: 0;
	}
  li.img-item {
		cursor: pointer;
		display: inline-block;
		margin: 0 20px 0 0;
		.img-wraper {
			width: 150px;
			height: 150px;
      display: inline-block;
      position: relative;
      border: 1px solid #ddd;
      border-radius: 3px;
			img {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				max-width: 100%;
				max-height:100%;
			}
		}
		.img-name {
			height:30px;
			line-height:30px;
			font-size:12px;
			text-align:center;
		}
  }
</style>
